<template>
  <div class="body">
    <div class="body_nav">
      <div
        class="body_can"
        v-for="(item,index) in listItem"
        :key="index"
        :class="defaultIndex===index?'red':''"
        @click="onClick(index)"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listItem: {
      required: true,
      type: Array,
    },
  },
  data() {
    return {
      defaultIndex:0
    };
  },
  methods: {
    onClick(index) {
      this.defaultIndex = index;
      this.$emit("onclick", index);
    },
  },
};
</script>

<style scoped>
.body {
  height: 32px;
  overflow: scroll;
}
.body_nav {
  width: 200%;
  height: 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.body_can {
  width: 40px;
  height: 32px;
}
.red {
  border-bottom: 1px solid red;
  color: red;
  font-size: 18px;
}
</style>